<template>
  <div class="media-list-view">
    <!-- 页面头部 -->
    <div class="page-header glass-card">
      <div class="header-content">
        <div class="header-main">
          <div class="header-info">
            <h1 class="page-title">
              <svg fill="none" viewBox="0 0 24 24">
                <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
              </svg>
              媒体库
            </h1>
            <p class="page-description">管理您的家庭照片、视频和音频文件</p>
          </div>

          <div class="header-actions">
            <router-link class="action-btn primary" to="/media/upload">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
              </svg>
              上传文件
            </router-link>

            <button class="action-btn secondary" @click="showBatchActions = !showBatchActions">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2"/>
                <path d="M21 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z" stroke="currentColor" stroke-width="2"/>
                <path d="M3 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z" stroke="currentColor" stroke-width="2"/>
              </svg>
              批量操作
            </button>
          </div>
        </div>

        <!-- 媒体统计 -->
        <div class="media-stats">
          <div class="stat-item">
            <div class="stat-value">{{ filteredMedia.length }}</div>
            <div class="stat-label">个文件</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatTotalSize(totalSize) }}</div>
            <div class="stat-label">总大小</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ mediaTypeStats.image }}</div>
            <div class="stat-label">图片</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ mediaTypeStats.video }}</div>
            <div class="stat-label">视频</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 筛选和搜索栏 -->
      <div class="filter-section glass-card">
        <div class="filter-container">
          <div class="search-section">
            <div class="search-box">
              <svg class="search-icon" fill="none" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
                <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
              </svg>
              <input
                v-model="searchQuery"
                class="search-input"
                placeholder="搜索文件名、标签或描述..."
                type="text"
              />
            </div>

            <div class="quick-filters">
              <button
                v-for="filter in quickFilters"
                :key="filter.value"
                :class="['quick-filter-btn', { active: selectedType === filter.value }]"
                @click="selectedType = filter.value"
              >
                <component :is="filter.icon" />
                <span>{{ filter.label }}</span>
              </button>
            </div>
          </div>

          <div class="filter-controls">
            <div class="control-group">
              <label class="control-label">排序</label>
              <select v-model="sortBy" class="filter-select">
                <option value="date">最新上传</option>
                <option value="name">文件名</option>
                <option value="size">文件大小</option>
                <option value="type">文件类型</option>
              </select>
            </div>

            <div class="control-group">
              <label class="control-label">显示</label>
              <div class="view-toggle">
                <button
                  :class="['toggle-btn', { active: viewMode === 'grid' }]"
                  @click="viewMode = 'grid'"
                >
                  <svg fill="none" viewBox="0 0 24 24">
                    <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="3"/>
                    <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="3"/>
                    <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="14"/>
                    <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="14"/>
                  </svg>
                </button>
                <button
                  :class="['toggle-btn', { active: viewMode === 'list' }]"
                  @click="viewMode = 'list'"
                >
                  <svg fill="none" viewBox="0 0 24 24">
                    <line stroke="currentColor" stroke-width="2" x1="8" x2="21" y1="6" y2="6"/>
                    <line stroke="currentColor" stroke-width="2" x1="8" x2="21" y1="12" y2="12"/>
                    <line stroke="currentColor" stroke-width="2" x1="8" x2="21" y1="18" y2="18"/>
                    <line stroke="currentColor" stroke-width="2" x1="3" x2="3.01" y1="6" y2="6"/>
                    <line stroke="currentColor" stroke-width="2" x1="3" x2="3.01" y1="12" y2="12"/>
                    <line stroke="currentColor" stroke-width="2" x1="3" x2="3.01" y1="18" y2="18"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-section">
        <div class="loading-content">
          <div class="loading-spinner"></div>
          <p class="loading-text">正在加载媒体文件...</p>
        </div>
      </div>

      <!-- 媒体文件网格视图 -->
    <div v-else-if="viewMode === 'grid'" class="media-grid">
      <div
        v-for="media in paginatedMedia"
        :key="media.fileId || media.id"
        class="media-card"
        @click="openMedia(media)"
      >
        <div class="media-thumbnail">
          <div v-if="media.fileType === 'image'" class="image-placeholder">
            <img
              v-if="media.thumbnailUrl"
              :alt="media.originalFileName || media.name"
              :src="media.thumbnailUrl"
              @error="handleImageError"
            />
            <svg v-else class="placeholder-icon" fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
              <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
              <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>

          <div v-else-if="media.fileType === 'video'" class="video-placeholder">
            <svg class="placeholder-icon" fill="none" viewBox="0 0 24 24">
              <polygon fill="currentColor" points="23,7 16,12 23,17"/>
              <rect fill="none" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="15" x="1" y="5"/>
            </svg>
            <div v-if="media.duration" class="media-duration">
              {{ formatDuration(media.duration) }}
            </div>
          </div>

          <div v-else-if="media.fileType === 'audio'" class="audio-placeholder">
            <svg class="placeholder-icon" fill="none" viewBox="0 0 24 24">
              <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
              <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>

          <div v-else class="file-placeholder">
            <svg class="placeholder-icon" fill="none" viewBox="0 0 24 24">
              <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" fill="currentColor"/>
            </svg>
          </div>

          <div :class="media.fileType" class="media-type-badge">
            {{ getMediaTypeLabel(media.fileType) }}
          </div>

          <div class="media-actions">
            <button class="action-btn" @click.stop="downloadMedia(media)">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>
            <button class="action-btn" @click.stop="shareMedia(media)">
              <svg fill="none" viewBox="0 0 24 24">
                <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
                <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
                <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
                <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
              </svg>
            </button>
          </div>
        </div>

        <div class="media-info">
          <h3 :title="media.originalFileName || media.name" class="media-name">
            {{ media.originalFileName || media.name }}
          </h3>
          <div class="media-meta">
            <span class="media-size">{{ formatFileSize(media.fileSize || media.size) }}</span>
            <span class="media-date">{{ formatDate(media.createTime || media.uploadedAt) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 媒体文件列表视图 -->
    <div v-else class="media-list">
      <div class="list-header">
        <div class="column-header">文件名</div>
        <div class="column-header">类型</div>
        <div class="column-header">大小</div>
        <div class="column-header">上传时间</div>
        <div class="column-header">操作</div>
      </div>

      <div
        v-for="media in paginatedMedia"
        :key="media.fileId || media.id"
        class="list-item"
        @click="openMedia(media)"
      >
        <div class="list-column file-column">
          <div :class="media.fileType" class="file-icon">
            <svg v-if="media.fileType === 'image'" fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
              <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
              <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
            </svg>
            <svg v-else-if="media.fileType === 'video'" fill="none" viewBox="0 0 24 24">
              <polygon fill="currentColor" points="23,7 16,12 23,17"/>
              <rect fill="none" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="15" x="1" y="5"/>
            </svg>
            <svg v-else-if="media.fileType === 'audio'" fill="none" viewBox="0 0 24 24">
              <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
              <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
            </svg>
            <svg v-else fill="none" viewBox="0 0 24 24">
              <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" fill="currentColor"/>
            </svg>
          </div>
          <span class="file-name">{{ media.originalFileName || media.name }}</span>
        </div>
        <div class="list-column">{{ getMediaTypeLabel(media.fileType) }}</div>
        <div class="list-column">{{ formatFileSize(media.fileSize || media.size) }}</div>
        <div class="list-column">{{ formatDate(media.createTime || media.uploadedAt) }}</div>
        <div class="list-column actions-column">
          <button class="list-action-btn" @click.stop="downloadMedia(media)">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
          <button class="list-action-btn" @click.stop="shareMedia(media)">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49"/>
              <line stroke="currentColor" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="pagination glass-card">
        <button
          :disabled="currentPage === 1"
          class="page-btn"
          @click="currentPage--"
        >
          <svg fill="none" viewBox="0 0 24 24">
            <polyline points="15,18 9,12 15,6" stroke="currentColor" stroke-width="2"/>
          </svg>
          上一页
        </button>

        <div class="page-numbers">
          <button
            v-for="page in visiblePages"
            :key="page"
            :class="['page-number', { active: page === currentPage }]"
            @click="currentPage = page"
          >
            {{ page }}
          </button>
        </div>

        <button
          :disabled="currentPage === totalPages"
          class="page-btn"
          @click="currentPage++"
        >
          下一页
          <svg fill="none" viewBox="0 0 24 24">
            <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && filteredMedia.length === 0" class="empty-state glass-card">
        <div class="empty-content">
          <div class="empty-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
              <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
              <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <h3 class="empty-title">暂无媒体文件</h3>
          <p class="empty-description">
            {{ searchQuery ? '没有找到匹配的文件' : '开始上传您的第一个文件吧' }}
          </p>
          <router-link class="empty-action" to="/media/upload">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
            </svg>
            上传文件
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'

const router = useRouter()

interface MediaFile {
  fileId?: number
  id?: number
  originalFileName?: string
  name?: string
  fileName?: string
  fileType: string
  fileSize?: number
  size?: number
  createTime?: string
  uploadedAt?: string
  thumbnailUrl?: string
  filePath?: string
  duration?: number
}

// 响应式数据
const loading = ref(false)
const mediaFiles = ref<MediaFile[]>([])
const searchQuery = ref('')
const selectedType = ref('')
const sortBy = ref('date')
const viewMode = ref<'grid' | 'list'>('grid')
const currentPage = ref(1)
const pageSize = ref(20)
const showBatchActions = ref(false)

// 快速筛选选项
const quickFilters = ref([
  {
    value: '',
    label: '全部',
    icon: 'svg',
    iconData: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2V7'
  },
  {
    value: 'image',
    label: '图片',
    icon: 'svg',
    iconData: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3'
  },
  {
    value: 'video',
    label: '视频',
    icon: 'svg',
    iconData: 'M23 7l-7 5 7 5V7zM1 5v14a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H3a2 2 0 00-2 2z'
  },
  {
    value: 'audio',
    label: '音频',
    icon: 'svg',
    iconData: 'M9 18V5l12-2v13M6 21a3 3 0 100-6 3 3 0 000 6zm12-2a3 3 0 100-6 3 3 0 000 6z'
  }
])

// 计算属性
const filteredMedia = computed(() => {
  let filtered = mediaFiles.value

  // 按类型筛选
  if (selectedType.value) {
    filtered = filtered.filter(media => media.fileType === selectedType.value)
  }

  // 按搜索关键词筛选
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(media =>
      (media.originalFileName || media.name || '').toLowerCase().includes(query)
    )
  }

  // 排序
  return filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'name':
        const nameA = (a.originalFileName || a.name || '').toLowerCase()
        const nameB = (b.originalFileName || b.name || '').toLowerCase()
        return nameA.localeCompare(nameB)
      case 'size':
        return (b.fileSize || b.size || 0) - (a.fileSize || a.size || 0)
      case 'date':
      default:
        const dateA = new Date(a.createTime || a.uploadedAt || 0).getTime()
        const dateB = new Date(b.createTime || b.uploadedAt || 0).getTime()
        return dateB - dateA
    }
  })
})

const totalSize = computed(() => {
  return filteredMedia.value.reduce((total, media) => {
    return total + (media.fileSize || media.size || 0)
  }, 0)
})

const mediaTypeStats = computed(() => {
  const stats = {
    image: 0,
    video: 0,
    audio: 0,
    document: 0
  }

  mediaFiles.value.forEach(media => {
    if (stats.hasOwnProperty(media.fileType)) {
      stats[media.fileType]++
    }
  })

  return stats
})

const totalPages = computed(() => {
  return Math.ceil(filteredMedia.value.length / pageSize.value)
})

const paginatedMedia = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredMedia.value.slice(start, end)
})

const visiblePages = computed(() => {
  const pages = []
  const maxVisible = 5
  const half = Math.floor(maxVisible / 2)

  let start = Math.max(1, currentPage.value - half)
  let end = Math.min(totalPages.value, start + maxVisible - 1)

  if (end - start < maxVisible - 1) {
    start = Math.max(1, end - maxVisible + 1)
  }

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }

  return pages
})

// 工具函数
const getMediaTypeLabel = (type: string) => {
  const labels = {
    image: '图片',
    video: '视频',
    audio: '音频',
    document: '文档'
  }
  return labels[type] || '文件'
}

const formatFileSize = (bytes: number) => {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatTotalSize = (bytes: number) => {
  return formatFileSize(bytes)
}

const formatDate = (dateStr: string | Date) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days} 天前`
  if (days < 30) return `${Math.floor(days / 7)} 周前`
  if (days < 365) return `${Math.floor(days / 30)} 个月前`

  return date.toLocaleDateString('zh-CN')
}

const formatDuration = (seconds: number) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 事件处理函数
const openMedia = (media: MediaFile) => {
  console.log('Opening media:', media)
  // TODO: 实现媒体预览功能
  Notify({
    type: 'info',
    message: '媒体预览功能开发中...',
    position: 'top-right'
  })
}

const downloadMedia = (media: MediaFile) => {
  console.log('Downloading media:', media)
  Notify({
    type: 'success',
    message: '开始下载文件...',
    position: 'top-right'
  })
}

const shareMedia = (media: MediaFile) => {
  console.log('Sharing media:', media)
  Notify({
    type: 'info',
    message: '分享功能开发中...',
    position: 'top-right'
  })
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.style.display = 'none'
}

// 数据加载
const loadMediaFiles = async () => {
  try {
    loading.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 模拟数据
    const mockData: MediaFile[] = [
      {
        id: 1,
        name: '家庭聚餐.jpg',
        fileType: 'image',
        size: 2048000,
        uploadedAt: '2024-01-20T10:30:00',
        thumbnailUrl: 'https://via.placeholder.com/300x200/4f46e5/ffffff?text=Family+Dinner'
      },
      {
        id: 2,
        name: '宝宝第一步.mp4',
        fileType: 'video',
        size: 15728640,
        uploadedAt: '2024-01-19T15:45:00',
        duration: 120
      },
      {
        id: 3,
        name: '生日歌.mp3',
        fileType: 'audio',
        size: 4194304,
        uploadedAt: '2024-01-18T20:15:00'
      },
      {
        id: 4,
        name: '旅行计划.pdf',
        fileType: 'document',
        size: 1024000,
        uploadedAt: '2024-01-17T09:00:00'
      },
      {
        id: 5,
        name: '春节合照.jpg',
        fileType: 'image',
        size: 3072000,
        uploadedAt: '2024-01-16T14:30:00',
        thumbnailUrl: 'https://via.placeholder.com/300x200/10b981/ffffff?text=Spring+Festival'
      }
    ]

    mediaFiles.value = mockData

  } catch (error: any) {
    console.error('Load media files failed:', error)
    Notify({
      type: 'error',
      message: '加载媒体文件失败：' + (error.message || '网络错误'),
      position: 'top-right'
    })
  } finally {
    loading.value = false
  }
}

// 监听搜索变化重置页码
watch(searchQuery, () => {
  currentPage.value = 1
})

watch(selectedType, () => {
  currentPage.value = 1
})

// 页面初始化
onMounted(() => {
  loadMediaFiles()
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/glassmorphism.scss';

.media-list-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 1rem;

  .glass-card {
    @include glass-card;
    margin-bottom: 2rem;
  }

  .page-header {
    max-width: 1200px;
    margin: 0 auto;

    .header-content {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      .header-main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;

        .header-info {
          .page-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 2.25rem;
            font-weight: 700;
            color: white;
            margin: 0 0 0.5rem 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            svg {
              width: 32px;
              height: 32px;
              color: rgba(255, 255, 255, 0.8);
            }
          }

          .page-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1rem;
            margin: 0;
            line-height: 1.5;
          }
        }

        .header-actions {
          display: flex;
          gap: 1rem;
          flex-shrink: 0;

          .action-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
              background: rgba(255, 255, 255, 0.2);
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            }

            svg {
              width: 18px;
              height: 18px;
            }

            &.primary {
              background: rgba(59, 130, 246, 0.3);
              border-color: rgba(59, 130, 246, 0.4);

              &:hover {
                background: rgba(59, 130, 246, 0.4);
              }
            }

            &.secondary {
              background: rgba(16, 185, 129, 0.3);
              border-color: rgba(16, 185, 129, 0.4);

              &:hover {
                background: rgba(16, 185, 129, 0.4);
              }
            }
          }
        }
      }

      .media-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;

        .stat-item {
          text-align: center;
          padding: 1rem;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(5px);
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.1);

          .stat-value {
            display: block;
            font-size: 1.75rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.25rem;
          }

          .stat-label {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            font-weight: 500;
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1200px;
    margin: 0 auto;
  }

  .filter-section {
    margin-bottom: 2rem;

    .filter-bar {
      background: white;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;

      .search-box {
        position: relative;
        flex: 1;
        max-width: 400px;

        .search-icon {
          position: absolute;
          left: 0.75rem;
          top: 50%;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
          color: #9ca3af;
        }

        .search-input {
          width: 100%;
          padding: 0.75rem 0.75rem 0.75rem 2.5rem;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          font-size: 0.9rem;
          background: #f9fafb;

          &:focus {
            outline: none;
            border-color: #3b82f6;
            background: white;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }
        }
      }

      .filter-controls {
        display: flex;
        align-items: center;
        gap: 1rem;

        .filter-select {
          padding: 0.5rem 0.75rem;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          background: white;
          font-size: 0.9rem;

          &:focus {
            outline: none;
            border-color: #3b82f6;
          }
        }

        .view-toggle {
          display: flex;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          overflow: hidden;

          .toggle-btn {
            padding: 0.5rem;
            background: white;
            border: none;
            cursor: pointer;
            color: #6b7280;
            transition: all 0.2s ease;

            &:hover {
              background: #f3f4f6;
            }

            &.active {
              background: #3b82f6;
              color: white;
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }

    .stats-bar {
      display: flex;
      gap: 2rem;
      padding: 1rem 0;

      .stats-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .stats-number {
          font-weight: 600;
          color: #1e293b;
        }

        .stats-label {
          font-size: 0.9rem;
          color: #6b7280;
        }
      }
    }
  }

  .loading-section {
    text-align: center;
    padding: 4rem 1rem;

    .loading-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid #e5e7eb;
      border-top: 4px solid #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 1rem;
    }

    .loading-text {
      color: #6b7280;
      font-size: 1rem;
    }
  }

  .media-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;

    .media-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .media-thumbnail {
        position: relative;
        height: 200px;
        overflow: hidden;

        .image-placeholder,
        .video-placeholder,
        .audio-placeholder,
        .file-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .placeholder-icon {
            width: 48px;
            height: 48px;
            color: white;
          }
        }

        .image-placeholder {
          background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        }

        .video-placeholder {
          background: linear-gradient(135deg, #ef4444, #dc2626);
        }

        .audio-placeholder {
          background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        }

        .file-placeholder {
          background: linear-gradient(135deg, #6b7280, #4b5563);
        }

        .media-type-badge {
          position: absolute;
          top: 0.5rem;
          left: 0.5rem;
          padding: 0.25rem 0.5rem;
          background: rgba(0, 0, 0, 0.7);
          color: white;
          font-size: 0.75rem;
          font-weight: 500;
          border-radius: 4px;
        }

        .media-duration {
          position: absolute;
          bottom: 0.5rem;
          right: 0.5rem;
          padding: 0.25rem 0.5rem;
          background: rgba(0, 0, 0, 0.7);
          color: white;
          font-size: 0.75rem;
          border-radius: 4px;
        }

        .media-actions {
          position: absolute;
          top: 0.5rem;
          right: 0.5rem;
          display: flex;
          gap: 0.5rem;
          opacity: 0;
          transition: opacity 0.2s ease;

          .action-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.9);
            color: #374151;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;

            &:hover {
              background: white;
              transform: scale(1.1);
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }

        &:hover .media-actions {
          opacity: 1;
        }
      }

      .media-info {
        padding: 1rem;

        .media-name {
          font-size: 0.95rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.5rem 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .media-meta {
          display: flex;
          justify-content: space-between;
          font-size: 0.8rem;
          color: #6b7280;

          .media-size {
            font-weight: 500;
          }
        }
      }
    }
  }

  .media-list {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .list-header {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 1rem;
      padding: 1rem 1.5rem;
      background: #f8fafc;
      border-bottom: 1px solid #e5e7eb;

      .column-header {
        font-size: 0.85rem;
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }

    .list-item {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 1rem;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid #f1f5f9;
      cursor: pointer;
      transition: background-color 0.2s ease;

      &:hover {
        background: #f8fafc;
      }

      .list-column {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        color: #374151;

        &.file-column {
          .file-icon {
            width: 24px;
            height: 24px;
            margin-right: 0.75rem;
            flex-shrink: 0;

            &.image { color: #3b82f6; }
            &.video { color: #ef4444; }
            &.audio { color: #8b5cf6; }
            &.document { color: #6b7280; }

            svg {
              width: 100%;
              height: 100%;
            }
          }

          .file-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
          }
        }

        &.actions-column {
          gap: 0.5rem;

          .list-action-btn {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 4px;
            background: #f3f4f6;
            color: #6b7280;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;

            &:hover {
              background: #e5e7eb;
              color: #374151;
            }

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }
    }
  }

  .pagination {
    max-width: 1200px;
    margin: 2rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    .page-btn {
      padding: 0.5rem 1rem;
      border: 1px solid #e5e7eb;
      background: white;
      color: #374151;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover:not(:disabled) {
        background: #f3f4f6;
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    .page-numbers {
      display: flex;
      gap: 0.25rem;

      .page-number {
        width: 40px;
        height: 40px;
        border: 1px solid #e5e7eb;
        background: white;
        color: #374151;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;

        &:hover {
          background: #f3f4f6;
        }

        &.active {
          background: #3b82f6;
          color: white;
          border-color: #3b82f6;
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 4rem 1rem;
    max-width: 1200px;
    margin: 0 auto;

    .empty-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 1rem;
      color: #d1d5db;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    .empty-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #374151;
      margin: 0 0 0.5rem 0;
    }

    .empty-description {
      color: #6b7280;
      margin: 0 0 1.5rem 0;
    }

    .empty-action {
      display: inline-flex;
      align-items: center;
      padding: 0.75rem 1.5rem;
      background: #3b82f6;
      color: white;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.2s ease;

      &:hover {
        background: #2563eb;
        transform: translateY(-2px);
      }
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 1200px) {
  .media-list-view {
    .media-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

@media (max-width: 992px) {
  .media-list-view {
    .media-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .filter-section .filter-bar {
      .filter-controls {
        gap: 0.75rem;
        flex-wrap: wrap;
      }
    }
  }
}

@media (max-width: 768px) {
  .media-list-view {
    padding: 1rem 0.5rem;

    .page-header .header-content {
      flex-direction: column;
      gap: 1rem;
      text-align: center;

      .header-text .page-title {
        font-size: 1.75rem;
      }

      .header-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;

        .stat-item {
          min-width: auto;

          .stat-number {
            font-size: 1.25rem;
          }
        }
      }
    }

    .filter-section .filter-bar {
      flex-direction: column;
      gap: 1rem;

      .search-box {
        max-width: none;
        width: 100%;

        input {
          font-size: 16px; /* Prevent zoom on iOS */
        }
      }

      .filter-controls {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;

        .filter-select,
        .sort-select {
          flex: 1;
          min-width: 120px;
        }

        .view-toggle {
          order: -1;
          width: 100%;
          justify-content: center;
        }
      }
    }

    .media-grid {
      grid-template-columns: 1fr;
      gap: 1rem;

      .media-card {
        .media-overlay {
          .media-info {
            .media-title {
              font-size: 0.9rem;
            }

            .media-meta {
              font-size: 0.8rem;
            }
          }
        }

        .media-actions {
          padding: 0.75rem;
          gap: 0.5rem;

          .media-action {
            padding: 0.4rem;

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }
    }

    .media-list {
      .list-header,
      .list-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }

      .list-header {
        display: none;
      }

      .list-item {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        .list-column {
          padding: 0;

          &.file-column {
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 0.75rem;

            .file-info {
              .file-details {
                .file-name {
                  font-size: 1rem;
                  margin-bottom: 0.5rem;
                }

                .file-meta {
                  flex-direction: column;
                  align-items: flex-start;
                  gap: 0.25rem;
                }
              }
            }
          }

          &.actions-column {
            padding-top: 0.75rem;
            border-top: 1px solid #f1f5f9;

            .list-actions {
              justify-content: center;
              gap: 0.75rem;

              .list-action {
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
              }
            }
          }

          &:not(.file-column):not(.actions-column) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.25rem 0;
            font-size: 0.9rem;

            &::before {
              content: attr(data-label) ': ';
              font-weight: 500;
              color: #6b7280;
              min-width: 60px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .media-list-view {
    padding: 0.75rem 0.25rem;

    .page-header .header-content {
      padding: 1.5rem 1rem;

      .header-text .page-title {
        font-size: 1.5rem;
      }

      .header-stats {
        gap: 0.75rem;

        .stat-item {
          .stat-number {
            font-size: 1.1rem;
          }

          .stat-label {
            font-size: 0.8rem;
          }
        }
      }
    }

    .filter-section .filter-bar {
      padding: 1rem;
      gap: 0.75rem;

      .search-box input {
        padding: 0.75rem;
      }

      .filter-controls {
        gap: 0.5rem;

        .filter-select,
        .sort-select {
          min-width: 100px;
          font-size: 0.9rem;
          padding: 0.5rem;
        }
      }
    }

    .media-grid .media-card {
      .media-thumbnail {
        height: 200px;
      }

      .media-actions {
        padding: 0.5rem;

        .media-action {
          padding: 0.35rem;

          svg {
            width: 12px;
            height: 12px;
          }
        }
      }
    }

    .media-list .list-item {
      padding: 0.75rem;
      gap: 0.5rem;

      .list-column.file-column {
        .file-info {
          gap: 0.5rem;

          .file-thumbnail {
            width: 40px;
            height: 40px;
          }

          .file-details {
            .file-name {
              font-size: 0.9rem;
            }

            .file-meta {
              font-size: 0.8rem;
            }
          }
        }
      }
    }
  }
}
</style>
